//表格数据
import { useState, useEffect, useMemo } from 'react';
import ProTable from '@/components/ProTable';
import OrderDetailModal from '../../../Actions/common/OrderDetailModal';
import SetOrderNothsModal from "../../../Actions/common/SetOrderNothsModal";
import EditAddress from '../../../Actions/common/EditAddress';
import LogisticsModal from "../../../Actions/common/LogisticsModal";
import SetOrderLabelModal from "../../../Actions/common/SetOrderLabelModal";
import SetExpressModal from '../../../Actions/common/SetExpressModal';
import { getColumnsData } from './ColumnConfig';
import { getFieldConfig, updateFieldConfig, queryWarehouseList } from '../../services';
import { debounce } from 'lodash';

const TableList = (props) => {
	const { actions, realColumns, orderList, selectKeys, headerHeight, setselectKeys, updatePageConfig, handleOk } = props;

	const [record, setRecord] = useState({});

	const [visible, setVisible] = useState(null);

	const [warehouseList, setWarehouseList] = useState([]);

	const [imageShowConfig, setImageShowConfig] = useState({image: "small",
		info: ["name", "color", "goods", "style"],
		all: false
	})

	//基础信息获取
	useEffect(() => {
		getWarehouseList(); //发货仓列表
		getImgShowConfig();
	}, []);

	//获取图片显示配置
	const getImgShowConfig = async () => {
		const { success, data = [] } = await getFieldConfig({ code: 'imageShowConfig'});
		if (success) {
			if(data.param) {
				setImageShowConfig(JSON.parse(data.param));
			}
		}
	}

//保存图片显示配置
const updateImgShowConfig = (v) => {
	const params = {
		code: 'imageShowConfig',
		param: JSON.stringify(v)
	}
	updateFieldConfig(params);
}

	//发货仓列表数据
	const getWarehouseList = async () => {
		const { success, data = [] } = await queryWarehouseList();
		if (success) {
			setWarehouseList(data);
		}
	};

	//渲染展示的列
	const columns = useMemo(() => {
		return getColumnsData({
			columns: realColumns,
			actions,
			selectKeys,
			orderList,
			warehouseList,
			imageShowConfig,
			setImageShowConfig,
			updateImgShowConfig,
			//单个操作
			handleSingleUpdate(id) {
				handleOk(1, [id]);
			},
			//弹框操作
			handleModalOpera(scene, record) {
				setRecord(record);
				setVisible(scene);
			}
		})
	}, [realColumns, imageShowConfig, selectKeys, warehouseList])

	//保存列款配置
	const saveColumnWidth = (val) => {
		realColumns.map((v, i) => {
			//忽略选择列
			v.width = val[i+1];
		})
		updatePageConfig('columns', realColumns)
	}

	//表格组件参数
	const ProTableProps = {
		data: orderList,
		columns,
		checkOption: {
			value: selectKeys,
			selectChange(value) {
				setselectKeys(value);
			}
		},
		columnResizeOption: {
			onChangeSizes: debounce(saveColumnWidth, 1000)
		},
		style: {
			height: `calc(100vh - ${172 + headerHeight}px)`
		},
	};

	//订单商品明细
	const OrderDetailModalProps = {
        actions,
		orderList,
		item: record,
		handleOk(ids) {
			handleOk(1, [...new Set(ids)]);
			setVisible(null);
		},
		handleUpdateOrderList() {
			handleOk(2);
			setVisible(null);
		}
	}

	//标签弹窗
	const SetOrderLabelModalProps = {
		isBatch: false, //是否是批量操作
		recordData: record,
		handleCancel() {
			setVisible(null);
		},
		handleOk(id) {
			setVisible(null);
			handleOk(1, [id]);
		}
	};

	//查看物流弹窗
	const LogisticsModalProps = {
		rowData: record,
		handleCancel() {
			setVisible(null);
		}
	};

	//修改订单/卖家备注弹窗
	const SetSellerNothsModalProps = {
		remarkType: visible, //订单或者卖家备注
		isBatch: false, //是否是批量操作
		recordData: record,
		operationPage: actions,
		handleCancel() {
			setVisible(null);
		},
		handleOk(id) {
			setVisible(null);
			handleOk(1, [id]);		
		}
	};

	//编辑地址弹框
	const EditAddressProps = {
		actions,
		handleCancel() {
			setRecord({});
			setVisible(null);
		},
		handleOk() {
			handleOk(1, [record.id]);
			setVisible(null);
		},
		record,
		initValues: record.deliveryInfoList?.filter(info => info.type === 2)?.[0] || {}
	}

	//设快递弹框
	const SetExpressModalProps = {
		id: record.id,
		orderList,
		handleOk() {
			handleOk(1, [record.id]);
		},
		handleCancel() {
			setVisible(null);
		}
	}

	return (
		<>
			<ProTable {...ProTableProps} />
			{visible === 'orderDetail' && <OrderDetailModal { ...OrderDetailModalProps} />}
			{visible === "setLabel" && <SetOrderLabelModal {...SetOrderLabelModalProps} />}
			{visible == 'viewLogistics' && <LogisticsModal {...LogisticsModalProps} />}
			{['orderRemark', 'sellerMessage'].includes(visible) && <SetOrderNothsModal {...SetSellerNothsModalProps} />}
			{visible == 'updateAddress' && <EditAddress {...EditAddressProps} />}
			{visible == 'setExpress' && <SetExpressModal {...SetExpressModalProps} />}
		</>
	)
}

export default TableList;